<template>
  <div class="pad-content-box form-no-padding-box padding-top-20">
    <section>
      <el-form label-width="110px" size="small" :model="searchParams">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="款项类型" prop="fundsTypeItemList">
              <el-select v-model="searchParams.fundsTypeItemList" multiple :multiple-limit="1"   placeholder="请选择" >
                <el-option v-for="item in subMoneyList" :key="item.key" :label="item.value" :value="item.key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户名称" prop="likeCustomerInfoName">
              <el-input placeholder="请输入" v-model="searchParams.likeCustomerInfoName" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="付款方式" prop="paymentMethod">
              <el-select v-model="searchParams.paymentMethodList" multiple :multiple-limit="1" clearable filterable>
                <el-option v-for="item in actualIncomePaymentMethod" :key="item.key" :label="item.value" :value="item.key" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="activeTab==1">
            <el-form-item label="收款公司" prop="likePayer">
              <el-input placeholder="请输入" v-model="searchParams.likePayer" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="activeTab==1">
            <el-form-item label="收款账户" prop="likePaymentAccount">
              <el-input placeholder="请输入" v-model="searchParams.likePaymentAccount" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="activeTab==1">
            <el-form-item label="收款日期" prop="collectionTime">
              <el-date-picker 
                v-model="searchParams.collectionTime" 
                type="daterange"
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"> 
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="activeTab==4">
            <el-form-item label="退款公司" prop="likePayer">
              <el-input placeholder="请输入" v-model="searchParams.likePayer" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="activeTab==4">
            <el-form-item label="退款账户" prop="likePaymentAccount">
              <el-input placeholder="请输入" v-model="searchParams.likePaymentAccount" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="activeTab==4">
            <el-form-item label="退款日期">
              <el-date-picker 
                v-model="searchParams.collectionTime" 
                type="daterange"
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"> 
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收/退款批号" prop="likeBatchNo">
              <el-input placeholder="请输入" v-model="searchParams.likeBatchNo" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </section>
    <el-tabs class="margin-top-20 has-tab-header-border" v-model="activeTab" @tab-click="tabClick">
      <template v-for="item in typeList">
        <el-tab-pane :key="item.key" :name="item.key" :label="item.name">
          <data-list :active-tab="activeTab" :ref="item.key" :searchParams="searchParams"></data-list>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script>
  
  import dataList from './components/dataList.vue';
  import {incomeConstant} from '../../api/receiptRefundAccount';
  export default {
    name: 'salesReport',
    components:{dataList},
    data() {
      return {
        activeTab:'1',
        searchParams:{},
        tableData:[],
        currentPage: 1,
        pageSize: 10,
        total:0,
        showAddDialog:false,
        agreementList:[],
        typeList: [{ key: '1', name: '收款台账' },{ key: '4', name: '退款台账' }],
        actualIncomePaymentMethod:[],
        subMoneyList:[]
      };
    },
    created() {
      this.getConstant()
      this.initSonElement()
    },
    methods: {
      //常量
      async getConstant() {
        let res = await incomeConstant();
        this.actualIncomePaymentMethod = res.actualIncomePaymentMethod ||[]
        this.subMoneyList = res.fundsTypeItem
      },
      
      //切换tab
      tabClick(tab, event) {
        this.activeTab = tab.name;
        this.searchParams = {}
        this.initSonElement();
      },

      //子组件初始化
      initSonElement() {
        this.$nextTick(() => {
          this.$refs[this.activeTab] && this.$refs[this.activeTab][0].init();
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .has-tab-header-border .el-tabs__header {
    border: none;
  }
  ::v-deep .cell{
    text-align: center;
  }
</style>
